<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
    body{
        text-align: center;
    }
    .head{
        text-align: center;
        width: 100%;
        height: 70px;
        background-color: #F4F4F4;
        margin-bottom: 100px;
    }
    #push{
        font-size: larger;
        width: 100%;
        color:#fff;
        transform:translatex(-2%);
    }
    li{
        list-style: none;
        margin-right: 20px;
        display:inline-block;
    }
    #push li a{
        text-decoration: none;
        color:black;
        height: 70px;
        line-height: 70px;
        /* display:inline-block; */
    }
    #body1{
        width: 500px;
        height: auto;
        margin:0 auto;
    }
    .body1-css{
        width: 500px;
    }
    img{
        width: 100px;
        height: 100px;
        border-radius: 50px;
        float: left;
        clear: both;
        margin: 5px;
    }
    .body2{
        margin-bottom: 50px;
    }
</style>
<body>
    <div class="head">
        <ul id="push">
            <li><a href="#body1">基本信息</a></li>
            <li><a href="#workexperce">工作经历</a></li>
            <li><a href="#study">教育经历</a></li>
            <li><a href="#skill">语言技能</a></li>
            <li><a href="#win">奖项&证书</a></li>
        </ul>
    </div> 
    <div>
        <div id="body1" style="margin-bottom: 100px;">
            <p style="text-align: left;">Hi,i'm yang kai,come from china.</p> 
            <img src="/imgs/face.png"  alt="" hspace="8">
            <div class="body1-css">
                <h1 style="text-align:left">WEB DEVELOPER</h1>
                <p style="text-align:left">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                </p>
            </div>
        </div>
    </div>
    <div id="workexperce" style="background-color:#F4F4F4;margin-bottom: 100px;">
        <div style="width: 500px;margin:0 auto">
            <div style="text-align: left;">
                <h2 style="border-bottom: 30px;">工作经历</h2>
                <div class="body2">
                    <p>2014-2015</p>
                    <u>xxxxxxxxxx</u>
                    <p>Web Designer</p>
                </div>
                <div class="body2">
                    <p>2014-2015</p>
                    <u>xxxxxxxxxx</u>
                    <p>Web Designer</p>
                </div>
                <div class="body2">
                    <p>2014-2015</p>
                    <u>xxxxxxxxxx</u>
                    <p>Web Designer</p>
                </div>
            </div>
        </div>
    </div>
    <div id="study" style="margin-bottom: 100px;">
        <div style="width: 500px;margin:0 auto">
            <div style="text-align: left;">
                <h2 style="border-bottom: 30px;">教育经历</h2>
                <div class="body2">
                    <p>2014-2015</p>
                    <p>xxxxxxxxxx</p>
                </div>
                <div class="body2">
                    <p>2015-2018</p>
                    <p>xxxxxxxxxx</p>
                </div>
                <div class="body2">
                    <p>2018-2021</p>
                    <p>xxxxxxxxxx</p>
                </div>
            </div>
        </div>
    </div>
    <div id="skill" style="background-color:#F4F4F4;margin-bottom: 100px;">
        <div style="width: 500px;margin:0 auto">
            <div style="text-align: left;">
                <h2 style="border-bottom: 30px;">语言技能</h2>
                <div class="body2">
                    <p>2014-2015</p>
                    <u>xxxxxxxxxx</u>
                    <p>Web Designer</p>
                </div>
                <div class="body2">
                    <p>2014-2015</p>
                    <u>xxxxxxxxxx</u>
                    <p>Web Designer</p>
                </div>
                <div class="body2">
                    <p>2014-2015</p>
                    <u>xxxxxxxxxx</u>
                    <p>Web Designer</p>
                </div>
            </div>
        </div>
    </div>
    <div id="win" style="margin-bottom: 100px;">
        <div style="width: 500px;margin:0 auto">
            <div style="text-align: left;">
                <h2 style="border-bottom: 30px;">获奖&证书</h2>
                <div class="body2">
                    <p>2014-2015</p>
                    <p>xxxxxxxxxx</p>
                </div>
                <div class="body2">
                    <p>2015-2018</p>
                    <p>xxxxxxxxxx</p>
                </div>
                <div class="body2">
                    <p>2018-2021</p>
                    <p>xxxxxxxxxx</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>